<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" session="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<style type="text/css">
    #layerPop{  
        width:500px;
        height:200px;         
        position:absolute;  
        background:#ffffff;      
        display: none;  
        border: 5px solid #3571B5;
        padding:10px;     
    }  

    #layerPop .close{    
        position:absolute;
        bottom:5px;
        right:5px;
    }

    .bg {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:#000;
        opacity:.5;
        filter:alpha(opacity=50);
        display:none;
    }

</style>  

<script type="text/javascript">

function openLayerPopup(event, planGrpNo){   
   $("#grpMoveBtn").attr("href", "javascript:planListAjax('" +planGrpNo + "');");     
   $("#grpUpdateBtn").attr("href", "javascript:planGrpUpdateForm('" +planGrpNo + "');");
   $("#grpDeleteBtn").attr("href", "javascript:planGrpDeleteAjax('" +planGrpNo + "');");     
   var layerPop = $("#layerPop");     
   var bg = $(".bg");
   bg.fadeIn();   
   layerPop.fadeIn();
   var top = (event.pageY - 30) + "px";                                  
   var left = (event.pageX - 250) + "px";               
   layerPop.css("top", top);
   layerPop.css("left", left);
}

//레이어 팝업 닫기
function closeLayer(){
	$("#layerPop").hide();
}

//load scriptting
$(document).ready(function () {
	// 플랜 리스트
	planGrpListAjax();
	
    $("#planNm").bind("keydown", function(e) {
        if (e.keyCode == 13) { // enter key
        	if($("#planGrpNo").val() == ""){
        		planGrpRegistAjax();  
        	}else{
        		planRegistAjax();   
        	}
        	  
            return false;   
        } 

    });   
	
});    

function planDeleteAjax(planNo){  
	$.ajax({  
		type:"post"   
		,url:"/plan/planDeleteAjax.do"
		,data:{"planNo":planNo}
		,dataType:"json"
		,success:function(data){
			if(data == 1){  
				planListAjax($("#planGrpNo").val());  
			}
		}
	});
}   
   
function planListAjax(planGrpNo) {
	$("#layerPop").hide();
	$("#planGrpNo").val(planGrpNo);
	$("#registBtn").attr("href", "javascript:planRegistAjax();");
	$.ajax({   
		type:"post"
		,url:"/plan/planListAjax.do"
		,data:{"planGrpNo":planGrpNo}
		,dataType:"json"     
		,success:function(data){   
			var planMainDiv = "";  
			if(data.length > 0){  
				for(var i=0; i<data.length;i++){      
					planMainDiv += " <a href=\"#\" ondblclick=\"planDeleteAjax('" + data[i].planNo + "'); \" class=\"list-group-item\" >" + (i + 1) + ". " + data[i].planNm + "</a>";  
				}         
			}       
			$("#planMainDiv").html(planMainDiv);
		}
	});
}

function planRegistAjax() {
	if($("#planNm").val() == "" || $("#planNm").val() == null){
		alert("입력해주세요.");
		return;
	}
	$.ajax({
		type:"post"
		,url:"/plan/planRegistAjax.do"
		,data:{"planNm":$("#planNm").val()
			  ,"planGrpNo":$("#planGrpNo").val()  
		}  
		,dataType:"json"
		,success:function(data){   
			if(data == 1){  
				$("#planNm").val("");    
				planListAjax($("#planGrpNo").val());
			}  
		} 
	});
}      

function planGrpListAjax() { 
	$("#planGrpNo").val(""); 
	$("#registBtn").attr("href", "javascript:planGrpRegistAjax();");
	$.ajax({   
		type:"post"
		,url:"/plan/planGrpListAjax.do"
		,data:{"":""}     
		,dataType:"json"     
		,success:function(data){
			var planGrpMainDiv = "";     
			if(data.length > 0){    
				for(var i=0; i<data.length;i++){           
					planGrpMainDiv += " <a href=\"#\" onclick=\"openLayerPopup(event, '" + data[i].planGrpNo + "'); \" class=\"list-group-item\" ><span class=\"badge pull-right\">" + data[i].planCnt + "</span>" + (i + 1) + ". " + data[i].planNm + "</a>";  
				}                 
			}   
			$("#planMainDiv").html(planGrpMainDiv);
		}     
	});  
}  

function planGrpRegistAjax() {
	if($("#planNm").val() == "" || $("#planNm").val() == null){
		alert("입력해주세요.");
		return;
	}
	
	$.ajax({
		type:"post" 
		,url:"/plan/planGrpRegistAjax.do"
		,data:{"planNm":$("#planNm").val()}  
		,dataType:"json"  
		,success:function(data){   
			if(data == 1){  
				$("#planNm").val("");
				planGrpListAjax();
			}
		} 
	});
}     

function planGrpDeleteAjax(planGrpNo){
    $("#layerPop").hide();       
	$.ajax({ 
		type:"post"     
		,url:"/plan/planGrpDeleteAjax.do"  
		,data:{"planGrpNo":planGrpNo}
		,dataType:"json"
		,success:function(data){
			if(data == 1){  
				planGrpListAjax();   
			}
		}
	});
} 
 
function planGrpUpdateForm(planGrpNo) {  
    $("#grpUpdateProcBtn").attr("href", "javascript:planGrpUpdateAjax('" +planGrpNo + "');");
    $("#planGrpUpdateForm").show();      
}     

function planGrpUpdateAjax(planGrpNo){
if($("#planUpdateNm").val() == "" || $("#planUpdateNm").val() == null){
	alert("입력해주세요.");
	return;
}
	$.ajax({    
		type:"post"   
		,url:"/plan/planGrpUpdateAjax.do"  
		,data:{"planGrpNo":planGrpNo, "planNm":$("#planUpdateNm").val()}
		,dataType:"json"    
		,success:function(data){
			if(data == 1){  
				$("#layerPop").hide();
			    $("#planGrpUpdateForm").hide();
				planGrpListAjax();  
				
			}
		}
	});
} 
 
</script>
<input type="hidden" name="planGrpNo" id="planGrpNo">

<div id="planMainDiv" class="list-group">    
</div>  
    
<form class="form-inline" role="form">
	<input type="text" name="planNm" id="planNm" class="form-control" placeholder="내용을 입려하세요" style="width:1000px;">
	<a id="registBtn" href="javascript:planGrpRegistAjax();" class="btn btn-default">저장</a>
	<a href="javascript:planGrpListAjax();" class="btn btn-default">뒤로가기</a>  
</form>

<div id="layerPop">
<p><strong>기능</strong></p>
<br>   
    <p>
     <a id="grpMoveBtn"   class="btn btn-default">이동</a>
	    <a id="grpUpdateBtn"   class="btn btn-default">수정</a>
	    <a id="grpDeleteBtn"  class="btn btn-default">삭제</a>  
	</p>   
	<p style="display:none;" id="planGrpUpdateForm"><input type="text" name="planUpdateNm" id="planUpdateNm" class="form-control" placeholder="내용을 입려하세요" style="width:300px;"><a id="grpUpdateProcBtn"   class="btn btn-default">수정완료</a></p>
    <p></p>         
<a href="#" onclick="closeLayer()" class="close"><img src=">/b_close.gif" border="0"></a>  
</div>